<template>
    <div>


        <!-- 条件查询 -->
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark">
              <el-form :inline="true" :model="searchData" class="demo-form-inline">

               <el-form-item label="发送者用户名" :label-width="formLabelWidth">
                 <el-input v-model="searchData.messageSender" clearable></el-input>
               </el-form-item>

                  <el-button type="primary" @click="searchTasks">查询</el-button>
              </el-form>
              </div></el-col>
        </el-row>


        <!-- 查询表格 -->
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark">
              <el-table :data="mageData" height="550">
                <el-table-column prop="id" label="Id"></el-table-column>
                <el-table-column prop="messageTitle" label="标题"></el-table-column>
                <el-table-column prop="messageContent" label="内容"></el-table-column>
                <el-table-column prop="messageSender" label="发送人"></el-table-column>
                <el-table-column prop="recipName" label="接收人"></el-table-column>
                <el-table-column prop="num" label="已读数"></el-table-column>
                <el-table-column prop="ber" label="接收人数"></el-table-column>
                <el-table-column prop="creationTime" label="创建时间"></el-table-column>
              </el-table>

            <!-- 分页 -->
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" style="float:right">
                </el-pagination>
            </div>
              </div></el-col>
        </el-row>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data(){
        return{
            formLabelWidth: '120px', //新增表单宽度
            pageNum:1,
            pageSize:2,
            total:null,
            mageData:[],
            searchData:{
               "messageSender": "",
            },
        }
    },
    created(){
        this.initTable();
    },
    methods:{

        //条件查询
        searchTasks(){
            this.initTable();
        },

        //查询
        initTable(){
            axios.post("/api/mage/findMagePaginationList?pageNum="+this.pageNum + "&pageSize=" +this.pageSize,this.searchData)
            .then(res=>{
                this.mageData = res.data.data.items
                this.total =res.data.data.totalElements
            })
        },
        //分页
        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTable();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTable()
        },

    }
}
</script>

<style scoped>

</style>